<template>
  <div>keep-alive 内置组件使用测试</div>
  <!-- 基本 -->
  <!-- <keep-alive>
    <component :is="view"></component>
  </keep-alive> -->

  <!-- 多个条件判断的子组件 -->
  <button @click="tab = !tab">切换组件</button>
  <!-- include 和 exclude 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示 -->
  <!-- 要使用 include 和 exclude 的话就需要给组件添加 name-->
  <!-- A组件生命中期中会多出 onActivated onDeactivated ，少了 onBeforeUnmount onUnmounted ,onMounted只会执行一次-->
  <keep-alive :include="['A']">
    <A v-if="tab" />
    <B v-else />
  </keep-alive>

  <!-- max 最多可以缓存多少组件实例 -->
  <div>测试 max</div>
  <button @click="tab = !tab">切换组件</button>
  <!-- 只能在里面添加一个组件,多组件的时候需要条件渲染 -->
  <!-- <keep-alive :max="1">
    <A v-if="tab" />
    <B v-else />
  </keep-alive> -->

  <!-- 和 `<transition>` 一起使用 -->
  <!-- <transition>
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
  </transition> -->
</template>

<script setup lang="ts">
/**
 * 开启keep-alive 生命周期的变化：
 *    初次进入时： onMounted > onActivated
 *    退出后触发 deactivated
 *    再次进入：
 *    只会触发 onActivated
 *    事件挂载的方法等，只执行一次的放在 onMounted 中；组件每次进去执行的方法放在 onActivated 中
 */
import A from './A.vue';
import B from './B.vue';
import { ref } from 'vue';
const tab = ref<boolean>(true);

defineOptions({
  name: 'KeepAliveTest'
});
</script>
